import React, { useState } from 'react';
import { Button, Tabs, Segmented } from 'antd'
import './App.css';
import { useNavigate } from 'react-router-dom';
import InputPage from './pages/Input';
import OutPutPage from './pages/Output';

function App() {
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState('0')
  const toPush = (v: string) => {
    switch (v) {
      case 'Input':
        navigate('/input');
        break;
      case 'ontput':
        navigate('/output');
        break;
      default:
        break;
    }
  }
  const tabsInfo = [
    {
      key: '0',
      label: '输入设备',
      children: <InputPage />
    },
    {
      key: '1',
      label: '输出设备',
      children: <OutPutPage />
    },
  ]
  const onChange1 = (v: any) => {
    if (v === '输入设备') {
      setActiveKey('0')
    } else {
      setActiveKey('1')
    }

  }

const renderTabBar = () => {
  return <div >
    <Segmented style={{height:'40px',marginBottom:'20px'}} block options={['输入设备', '输出设备']} onChange={v => onChange1(v)} />
  </div>
}
return (
  <Tabs
    activeKey={activeKey}
    style={{ height: '100vh' }}
    renderTabBar={renderTabBar}
    items={tabsInfo}
  />

);
}

export default App;
